<template>
    <main class="site-content" :style="{width:sidebarFold?(screenWidth - 140) + 'px':(screenWidth - 320) + 'px',left:sidebarFold?90 + 'px':250 + 'px'}">
        <!-- 主入口标签页 s -->
        <el-tabs class="site-tabs"
                 v-model="mainTabsActiveName"
                 type="card"
                 @tab-click="selectedTabHandle"
                 @tab-remove="removeTabHandle">

            <!-- 管理Tabs -->
            <el-dropdown class="site-tabs-tools" :show-timeout="0">
                <i class="el-icon-arrow-down el-icon--right"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
                    <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
                    <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
                    <el-dropdown-item @click.native="tabsRefreshCurrentHandle">刷新当前标签页</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

            <el-tab-pane
                    v-for="item in mainTabs"
                    :key="item.name"
                    :label="item.title"
                    :closable = "item.name != 'home'"
                    @click.middle.native="removeTabHandle(item.name)"
                    :name="item.name">
                <el-card class="main-content-data">
                    <iframe
                            v-if="item.type === 'iframe'"
                            :src="item.url"
                            width="100%" height="700px" frameborder="0" scrolling="yes">
                    </iframe>
                    <keep-alive v-else>
                        <router-view v-if="item.name === mainTabsActiveName" />
                    </keep-alive>
                </el-card>
            </el-tab-pane>
        </el-tabs>

    </main>
</template>

<script>
    export default {
        name: "mainContent",
        data(){
            return {

            }
        },
        computed:{
            mainTabsActiveName: { //修订为路径唯一tabs
                get () { return this.$store.state.common.mainTabsActiveName },
                set (val) { this.$store.commit('updateMainTabsActiveName', val) }
            },
            mainTabs: {
                get () { return this.$store.state.common.mainTabs },
                set (val) { this.$store.commit('updateMainTabs', val) }
            },
            menuActiveName: {
                get () { return this.$store.state.common.menuActiveName },
                set (val) { this.$store.commit('updateMenuActiveName', val) }
            },
            sidebarFold() {
                return this.$store.state.common.sidebarFold;
            },
            screenWidth(){ //屏幕宽度
                return document.documentElement.clientWidth;
            }
        },
        methods:{
            selectedTabHandle(tab) {
                tab = this.mainTabs.filter(item => item.name === tab.name)
                if (tab.length >= 1) {
                    this.$router.push({ path: tab[0].path})
                    this.menuActiveName = tab[0].name
                }
            },
            removeTabHandle(tabName) {
                this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
                if (this.mainTabs.length >= 1) {
                    //home不允许被删除
                    if (tabName == 'home') {
                        return;
                    }

                    // 当前选中tab被删除
                    if (tabName === this.mainTabsActiveName) {
                        var tab = this.mainTabs[this.mainTabs.length - 1]
                        this.$router.push({ path: tab.path});
                        this.mainTabsActiveName = tab.name
                        this.menuActiveName = tab.name
                    }
                }
            },

            aa(){
                alert("11")
            },

            // tabs, 关闭当前
            tabsCloseCurrentHandle () {
                if(this.mainTabsActiveName != 'home'){
                    this.removeTabHandle(this.mainTabsActiveName)
                }
            },
            // tabs, 关闭其它
            tabsCloseOtherHandle () {
                this.mainTabs = this.mainTabs.filter(item => (item.name === this.mainTabsActiveName || item.name === 'home'))
            },
            // tabs, 关闭全部
            tabsCloseAllHandle () {
                this.mainTabs = this.mainTabs.filter(item => (item.name === 'home'))
                var tab = this.mainTabs[this.mainTabs.length - 1]
                this.$router.push({ path: tab.path});
                this.mainTabsActiveName = tab.name
                this.menuActiveName = tab.name
            },
            // tabs, 刷新当前
            tabsRefreshCurrentHandle () {
                var tab = this.$route
                this.removeTabHandle(tab.name)
                this.$nextTick(() => {
                    this.$router.push(tab.path)
                })
            }

        },
    }
</script>

<style scoped>

    .site-content {
        position: relative;
        padding: 15px;
        top: 50px;
        width: calc(100% - 300px);
    }

    .site-tabs{
        width: 100%;
    }

    .site-tabs-tools{
        position: fixed;
        top: 70px;
        right: 15px;
        z-index: 931;
        height: 40px;
        padding: 0 12px;
        font-size: 16px;
        line-height: 40px;
        cursor: pointer;
    }

    .main-content-data{
        width: 100%;
    }

</style>